<template>
    <!-- 筛选模块 -->
    <div class="item-class-show">
        <div class="content">
            <!-- -----------------品牌首字母开始---------------- -->
            <div
                class="other"
                style="padding-left:100px ; border-bottom:none ;"
            >
                <div style="width: 0; padding: 0;"></div>
                <div style="display: flex; width: 1100px;">
                    <ul class="list" @click="otherFn">
                        <li
                            class="item"
                            v-for="(item, index) in abcde"
                            :key="index"
                            style="width: 36px; padding-left:10px ;"
                            :id="item"
                        >
                            {{ item }}
                        </li>
                    </ul>
                </div>
            </div>
            <!-- -----------------品牌首字母结束---------------- -->
            <!-- -----------------品牌---------------- -->
            <div class="brand" style="position: relative;padding-left: 100px;">
                <div
                    style=" position: absolute; top: -42px; left: 0; height: 262px;"
                >
                    {{ keyTitle.split("").join(" ") }}
                </div>
                <div>
                    <!--  @click="selectBrand(item.brand_name, tagIndex, tag.type, item.brand_id)" -->
                    <!--   -->

                    <ul class="show-more">
                        <li
                            v-for="(item, index) in brandImg"
                            :key="index"
                            @click="brandFn(item.brand_id)"
                        >
                            <img
                                :src="item.brand_logo"
                                :alt="item.brand_name"
                                v-show="item.brand_logo.length > 23"
                            />
                            <span>{{ item.brand_name }}</span>
                            <!-- 'border-color': multSelected.includes(item.brand_name), -->
                            <!-- v-show="multSelected.includes(item.brand_name)" -->
                            <!-- <div class="corner-icon" :class="{'act':brandpinyin[1].val.includes(item.brand_id) }">
                                <div></div>
                                <Icon type="md-checkmark" />
                            </div> -->
                        </li>
                    </ul>

                    <!-- <div class="multBtn"> -->
                    <!-- v-show="multiple === tagIndex" -->
                    <!-- <Button type="primary" size="small" :disabled="!multSelected.length">确定</Button> -->
                    <!--  @click="sure(tagIndex, tag.type)" -->
                    <!-- <Button size="small" @click="cancel">取消</Button> -->
                    <!-- </div> -->
                </div>
            </div>
            <!-- -----------------品牌---------------- -->
            <!-- 其它筛选项 -->
        </div>
        <div class="content-tow">
            <div class="content-tow-title">
                <div class="text">全 部 商 品</div>
            </div>
            <div style="margin-top: 10px;  position: relative;">
                <div v-for="(tag, tagIndex) in tagsContent" :key="tagIndex">
                    <!-----------------热门类目开始---------------->
                    <div
                        class="mold-data"
                        v-if="tag.show && tag.type == 'cate'"
                        v-show="tagIndex < showTagCount"
                    >
                        <div class="hot-mold">
                            <div>
                                <strong>{{ tag.key }}：</strong>
                            </div>
                            <div>
                                <ul class="list">
                                    <li
                                        @click="
                                            selectBrand(
                                                item.title,
                                                tagIndex,
                                                tag.type,
                                                item.id
                                            )
                                        "
                                        class="item"
                                        v-for="(item, index) in tag.values"
                                        :key="index"
                                        :class="{
                                            act: tag.val.includes(item.id)
                                        }"
                                    >
                                        {{ item.title }}
                                    </li>
                                </ul>

                                <div class="btn">
                                    <span
                                        @click="moreBrand(tagIndex)"
                                        v-show="tag.values.length > 9"
                                        >{{ tag.more ? "收起" : "更多" }}
                                        <Icon
                                            :type="
                                                tag.more
                                                    ? 'ios-arrow-up'
                                                    : 'ios-arrow-down'
                                            "
                                        />
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-----------------热门类目结束---------------->

                    <!-----------------其余类目开始---------------->
                    <!-- v-show="tagIndex < showTagCount" -->
                    <div
                        class="other"
                        v-else-if="
                            tag.show &&
                                tag.type != 'brandpinyin' &&
                                tag.type != 'brands' &&
                                tag.type != 'cate'
                        "
                    >
                        <div>
                            <strong>{{ tag.key }}：</strong>
                        </div>
                        <div>
                            <ul
                                :class="{ 'show-more': tag.more }"
                                class="list"
                                v-show="multiple !== tagIndex"
                            >
                                <li
                                    @click="
                                        selectBrand(
                                            item.val,
                                            tagIndex,
                                            tag.type,
                                            item.key
                                        )
                                    "
                                    class="item"
                                    v-for="(item, index) in tag.values"
                                    :key="index"
                                    :class="{ act: tag.val.includes(item.key) }"
                                >
                                    {{ item.val }}
                                </li>
                            </ul>
                            <CheckboxGroup
                                :class="{ 'show-more': tag.more }"
                                class="list"
                                v-model="multSelected"
                                v-show="multiple === tagIndex"
                            >
                                <Checkbox
                                    class="item"
                                    :label="item.val"
                                    v-for="(item, index) in tag.values"
                                    :key="index"
                                    >{{ item.val }}</Checkbox
                                >
                            </CheckboxGroup>

                            <div class="btn" v-show="multiple !== tagIndex">
                                <span
                                    @click="moreBrand(tagIndex)"
                                    v-show="tag.values.length > 9"
                                    >{{ tag.more ? "收起" : "更多" }}
                                    <Icon
                                        :type="
                                            tag.more
                                                ? 'ios-arrow-up'
                                                : 'ios-arrow-down'
                                        "
                                    />
                                </span>
                                <span @click="multSelectBrand(tagIndex)">
                                    <Icon type="md-add" />多选
                                </span>
                            </div>

                            <div class="multBtn" v-show="multiple === tagIndex">
                                <Button
                                    type="primary"
                                    size="small"
                                    :disabled="!multSelected.length"
                                    @click="sure(tagIndex, tag.type)"
                                    >确定</Button
                                >
                                <Button size="small" @click="cancel"
                                    >取消</Button
                                >
                            </div>
                        </div>
                    </div>
                    <!-----------------其余类目结束---------------->
                </div>
                <!-- <div @click="moreOptions" v-if="tagsContent.length > 2" class="more-options">
                    {{ showTagCount === 5 ? '更多筛选项' : '收起筛选项' }}
                    <Icon :type="showTagCount === 5 ? 'ios-arrow-down' : 'ios-arrow-up'" />
                </div> -->
            </div>
            
            <div class="content-img">
                <!-- <img src="../../assets/images/jjjjjjj.jpg" alt="">  -->
                <iframe src="https://xp.wwtscm.com/multi.html" frameborder="0"  width="300px" height="210px" scrolling="auto"></iframe>
                <!-- <iframe src="https://open.ys7.com/view/h5/e163ae0ebdb44f6bb8393092b1dd60d0" frameborder="0"></iframe> -->
            </div>
        </div>
        <!-- 筛选主体 -->
        <!-- <div class="content"> --> 
        <!-- 筛选项 -->
        <!-- <div v-for="(tag, tagIndex) in tagsContent" :key="tagIndex"> -->
            
        <!-----------------品牌筛选开始---------------->
        <!-- <div class="brand" v-if="tag.show && tag.type == 'brands'" v-show="tagIndex < showTagCount">
                    <div>
                        <strong>{{ tag.key }}：12</strong>
                    </div>
                    <div>
                        <ul :class="{ 'show-more': tag.more }">
                            <li @click="selectBrand(item.brand_name, tagIndex, tag.type, item.brand_id)"
                                :class="{ 'border-color': multSelected.includes(item.brand_name), 'act': tag.val.includes(item.brand_id) }"
                                v-for="(item, index) in brands" :key="index">
                                <img :src="item.brand_logo" alt="" /><span>{{ item.brand_name }}</span>
                                <div class="corner-icon" v-show="multSelected.includes(item.brand_name)">
                                    <div></div>
                                    <Icon type="md-checkmark" />
                                </div>
                            </li>
                        </ul>

                        <div class="btn" v-show="multiple !== tagIndex">

                            <span @click="moreBrand(tagIndex)">{{ tag.more ? "收起" : "更多" }}
                                <Icon :type="tag.more ? 'ios-arrow-up' : 'ios-arrow-down'" />
                            </span>
                            <span @click="multSelectBrand(tagIndex)">
                                <Icon type="md-add" />多选
                            </span>
                        </div>

                        <div class="multBtn" v-show="multiple === tagIndex">
                            <Button type="primary" size="small" :disabled="!multSelected.length"
                                @click="sure(tagIndex, tag.type)">确定</Button>
                            <Button size="small" @click="cancel">取消</Button>
                        </div>
                    </div>

                </div> -->
        <!-----------------品牌筛选结束---------------->
        <!-----------------品牌首字母开始---------------->
        <!-- <div class="other" v-if="tag.show && tag.type == 'brandpinyin'" v-show="tagIndex < showTagCount">
                    <div>
                        <strong>{{ tag.key }}：</strong>
                    </div>
                    <div>
                        <ul :class="{ 'show-more': tag.more }" class="list" v-show="multiple !== tagIndex">
                            <li @click="selectBrand(item, tagIndex, tag.type, item, index)" class="item"
                                :class="{ 'act': tag.val.includes(item) }" v-for="(item, index) in tag.values"
                                :key="index" style="width: 32px;">
                                {{ item }}
                            </li>
                        </ul>
                    </div>
                </div> -->
        <!-----------------品牌首字母结束---------------->
        <!-----------------热门类目开始---------------->
        <!-- <div class="mold-data" v-else-if="tag.show && tag.type == 'cate'" v-show="tagIndex < showTagCount">
                    <div class="hot-mold">
                        <div>
                            <strong>{{ tag.key }}：</strong>
                        </div>
                        <div>
                            <ul class="list">
                                <li @click="selectBrand(item.title, tagIndex, tag.type, item.id)" class="item"
                                    v-for="(item, index) in tag.values" :key="index"
                                    :class="{ 'act': tag.val.includes(item.id) }">
                                    {{ item.title }}
                                </li>
                            </ul> -->
        <!-- 
                        <div class="btn">
                            <span @click="moreBrand(tagIndex)" v-show="tag.values.length > 9">{{ tag.more ? "收起" : "更多"
                                }}
                                <Icon :type="tag.more ? 'ios-arrow-up' : 'ios-arrow-down'" />
                            </span>
                        </div> -->
        <!-- </div>
                    </div>

                </div> -->
        <!-----------------热门类目结束---------------->

        <!-----------------其余类目开始---------------->
        <!-- <div class="other"
                    v-else-if="tag.show && tag.type != 'brandpinyin' && tag.type != 'brands' && tag.type != 'cate'"
                    v-show="tagIndex < showTagCount">
                    <div>
                        <strong>{{ tag.key }}：</strong>
                    </div>
                    <div>
                        <ul :class="{ 'show-more': tag.more }" class="list" v-show="multiple !== tagIndex">
                            <li @click="selectBrand(item.val, tagIndex, tag.type, item.key)" class="item"
                                v-for="(item, index) in tag.values" :key="index"
                                :class="{ 'act': tag.val.includes(item.key) }">
                                {{ item.val }}
                            </li>
                        </ul>
                        <CheckboxGroup :class="{ 'show-more': tag.more }" class="list" v-model="multSelected"
                            v-show="multiple === tagIndex">
                            <Checkbox class="item" :label="item.val" v-for="(item, index) in tag.values" :key="index">{{
                                item.val }}</Checkbox>
                        </CheckboxGroup>

                        <div class="btn" v-show="multiple !== tagIndex">
                            <span @click="moreBrand(tagIndex)" v-show="tag.values.length > 9">{{ tag.more ? "收起" : "更多"
                                }}
                                <Icon :type="tag.more ? 'ios-arrow-up' : 'ios-arrow-down'" />
                            </span>
                            <span @click="multSelectBrand(tagIndex)">
                                <Icon type="md-add" />多选
                            </span>
                        </div>

                        <div class="multBtn" v-show="multiple === tagIndex">
                            <Button type="primary" size="small" :disabled="!multSelected.length"
                                @click="sure(tagIndex, tag.type)">确定</Button>
                            <Button size="small" @click="cancel">取消</Button>
                        </div>
                    </div>
                </div> -->
        <!-----------------其余类目结束---------------->
        <!-- </div>
            <div @click="moreOptions" v-if="tagsContent.length > 4" class="more-options">
                {{ showTagCount === 5 ? '更多筛选项' : '收起筛选项' }}
                <Icon :type="showTagCount === 5 ? 'ios-arrow-down' : 'ios-arrow-up'" />
            </div>
        </div> -->
        <!-- -------------筛选内容展示条开始----------------- -->
        <div class="head-bar">
            <!-- 有商品分类展示商品分类 -->
            <template v-if="categoryId">
                <div @click="cateClick(tabBar, 1)">{{ tabBar.title }}</div>
                <Icon type="ios-arrow-forward" />

                <div class="bar" v-if="tabBar.first">
                    {{ tabBar.first.title }}
                    <Icon type="ios-arrow-down" />
                    <ul>
                        <li
                            v-for="item in tabBar.children"
                            :key="item.id"
                            @click="cateClick(item, 2)"
                        >
                            {{ item.title }}
                        </li>
                    </ul>
                </div>
                <Icon type="ios-arrow-forward" v-if="tabBar.first" />

                <div class="bar" v-if="tabBar.second">
                    {{ tabBar.second.title }}
                    <Icon type="ios-arrow-down" />
                    <ul>
                        <li
                            v-for="item in tabBar.first.children"
                            :key="item.id"
                            @click="cateClick(item, 3)"
                        >
                            {{ item.title }}
                        </li>
                    </ul>
                </div>
                <Icon type="ios-arrow-forward" v-if="tabBar.second" />
            </template>
            <!-- 无商品分类，展示搜索结果 -->
            <template v-else>
                <div style="font-size:14px">筛选内容</div>
                <Icon type="ios-arrow-forward" />
                <div style="font-weight:bold;" class="mr_10">
                    {{ params.keyword }}
                </div>
            </template>
            <!-- 所选分类 -->
            <a
                class="selected-item"
                @click="cancelSelected(item, index)"
                v-for="(item, index) in selectedItem"
                :key="index"
                :title="item.name"
            >
                <span>{{ item.key }}：</span><span>{{ item.name }}</span>
                <Icon type="md-close" />
            </a>
            <span style="flex: 1;"></span>
            <span class="clear" @click="clearSelectedItem">清空</span>
        </div>
        <!-- --------------筛选内容展示条结束------------------ -->
    </div>
</template>

<script>
import * as APIGoods from "@/api/goods";
export default {
    name: "GoodsClassNav",

    data() {
        return {
            tabBar: {
                // 分类数据
                name: "",
                first: {},
                second: {}
            },
            showTagCount: 2, // 展示的搜索项数量
            multiple: false, // 多选
            tagsContent: [
                // 标签
                {
                    key: "品牌",
                    more: false,
                    show: true,
                    values: []
                }
            ], //筛选列表项
            brandpinyin: [], //品牌展示数据

            RemainingData: [], //其余筛选数据
            multSelected: [], // 多选分类
            selectedItem: [], // 已选分类集合 顶部展示
            brandIds: [], // 品牌id合集
            brandImg: [], //品牌图片
            abcde: [],
            params: { brand_name: "", brands: "" }, // 请求参数
            pinyin: [],
            brands: [],
            initBrands: [],
            otherID: "", //选择对应的品牌首字母展示
            keyTitle: ""
        };
    },
    computed: {
        cateList() {
            // 商品分类
            return this.$store.state.category || [];
        },

        categoryId() {
            return this.$store.state.categoryId;
        }
    },
    watch: {
        selectedItem: {
            // 监听已选条件，来调用列表接口
            handler(val) {
                console.log("selectedItem", val);
                val.forEach(item => {
                    this.params[item.type] = item.typeval;
                });
                this.$emit("getParams", this.params);
            },
            deep: true
        },
        $route: {
            // 监听路由
            handler(val, oVal) {
                if (this.$route.query.categoryId) {
                    let cateId = this.$route.query.categoryId.split(",");
                    Object.assign(this.params, this.$route.query);
                    this.params.categoryId = cateId[cateId.length - 1];
                } else {
                    Object.assign(this.params, this.$route.query);
                }
                this.getFilterList(this.params);
                this.getNav();
            },
            deep: true
        },
        categoryId: {
            handler(val) {
                this.getNav();
            }
        }
    },
    methods: {
        brandFn(id) {
            this.params.brands = id;
            this.$emit("getParams", this.params);
        },
        getNav() {
            // 获取商品分类，分类下展示
            if (!this.categoryId) {
                return false;
            }

            if (!this.cateList.length) {
                // 商品分类存储在localstorage，接口未调用成功前再次刷新数据
                setTimeout(() => {
                    this.getNav();
                }, 500);
                return;
            }

            const arr = this.categoryId.split(",");
            if (arr.length > 0) {
                this.tabBar = this.cateList.filter(e => {
                    return e.id == arr[0];
                })[0];
            }
            if (arr.length > 1) {
                const first = this.tabBar.children.filter(e => {
                    return e.id == arr[1];
                })[0];
                this.$set(this.tabBar, "first", first);
            }
            if (arr.length > 2) {
                const second = this.tabBar.first.children.filter(e => {
                    return e.id == arr[2];
                })[0];
                this.$set(this.tabBar, "second", second);
            }
        },
        cateClick(item, index) {
            // 点选分类
            switch (index) {
                case 1:
                    /* this.$router.push({
                        path: '/goodsList',
                        query: {
                            categoryId: item.id
                        }
                    }) */
                    this.$store.commit("SET_CATEGORYID", item.id);
                    break;
                case 2:
                    /* this.$router.push({
                        path: '/goodsList',
                        query: {
                            categoryId: [item.pid, item.id].toString()
                        }
                    }) */
                    this.$store.commit(
                        "SET_CATEGORYID",
                        [item.pid, item.id].toString()
                    );
                    break;
                case 3:
                    /* this.$router.push({
                        path: '/goodsList',
                        query: {
                            categoryId: [this.tabBar.id, item.pid, item.id].toString()
                        }
                    }) */
                    this.$store.commit(
                        "SET_CATEGORYID",
                        [this.tabBar.id, item.pid, item.id].toString()
                    );
                    break;
            }
        },

        selectBrand(item, index, type = "", typeval = "") {
            // 选择筛选项
            if (this.multiple !== false) {
                // 非多选直接在顶部栏展示，多选则添加选择状态
                let key = this.multSelected.indexOf(item);
                if (key > -1) {
                    this.multSelected.splice(key, 1);
                } else {
                    this.multSelected.push(item);
                }
            } else {
                if (type == "brands") {
                    this.brandIds.push(typeval);
                }

                if (type == "brandpinyin") {
                    if (this.tagsContent[index].val.includes(typeval)) {
                        this.brands = this.initBrands;
                        this.tagsContent[index].val = [];
                    } else {
                        let brands = [];
                        for (let i in this.initBrands) {
                            if (
                                this.initBrands[i].pinyin &&
                                this.initBrands[i].pinyin == typeval
                            ) {
                                brands.push(this.initBrands[i]);
                            }
                        }
                        this.brands = brands;
                        this.tagsContent[index].val = [typeval];
                    }
                } else {
                    if (this.tagsContent[index].val.includes(typeval)) {
                        return false;
                    } else {
                        this.tagsContent[index].val = [typeval];
                    }

                    let selectedItem = [];
                    let has = false;
                    for (let i in this.selectedItem) {
                        if (this.selectedItem[i].type == type) {
                            has = true;
                            if (this.tagsContent[index].val.length > 0) {
                                this.selectedItem[i].name = item;
                                this.selectedItem[i].typeval = this.tagsContent[
                                    index
                                ].val;
                            } else {
                                delete this.selectedItem[i];
                            }
                        }
                    }

                    if (!has) {
                        this.selectedItem.push({
                            key: this.tagsContent[index].key,
                            name: item,
                            type: type,
                            typeval: [typeval]
                        });
                    }
                    //this.tagsContent[index].show = false;
                }
            }
        },

        cancelSelected(item, index) {
            // 顶部栏 取消已选中的项

            this.selectedItem.splice(index, 1);

            this.params[item.type] = "";

            this.tagsContent.forEach((tag, index) => {
                if (tag.type === item.type) {
                    tag.show = true;
                    tag.more = false;

                    tag.val = [];
                }
            });

            if (item.type === "brands") {
                this.brandIds = [];
            }
        },

        moreBrand(index) {
            // 更多按钮
            const flag = !this.tagsContent[index].more;
            this.$set(this.tagsContent[index], "more", flag);
        },

        multSelectBrand(index) {
            // 多选按钮
            this.$set(this.tagsContent[index], "more", true);
            this.multiple = index;
        },

        searchBrand() {
            this.$emit("getParams", this.params);
        },

        sure(index, type) {
            // 多选确认按钮
            let typeval = [];
            let values = this.tagsContent[index].values;
            if (type == "brandpinyin") {
                typeval = this.multSelected;
            } else if (type == "brands") {
                values.forEach(val => {
                    if (this.multSelected.includes(val.brand_name)) {
                        this.brandIds.push(val.brand_id);
                        typeval.push(val.brand_id);
                    }
                });
            } else {
                values.forEach(val => {
                    if (this.multSelected.includes(val.val)) {
                        typeval.push(val.key);
                    }
                });
            }
            this.tagsContent[index].val = typeval;
            let has = false;
            for (let i in this.selectedItem) {
                if (this.selectedItem[i].type == type) {
                    has = true;
                    if (this.tagsContent[index].val.length > 0) {
                        this.selectedItem[i].name = this.multSelected.join(
                            "、"
                        );
                        this.selectedItem[i].typeval = this.tagsContent[
                            index
                        ].val;
                    } else {
                        delete this.selectedItem[i];
                    }
                }
            }

            if (!has) {
                this.selectedItem.push({
                    key: this.tagsContent[index].key,
                    name: this.multSelected.join("、"),
                    type: type,
                    typeval: typeval
                });
            }
            this.cancel();
        },

        cancel() {
            // 多选取消按钮
            this.multSelected = [];
            this.tagsContent[0].more = false;
            this.multiple = false;
        },

        getFilterList(params) {
            // 筛选、分类  列表
            APIGoods.filterList(params).then(res => {
                if (res.code == 1) {
                    const data = res.data;
                    this.tagsContent = data.paramOptions;
                    this.tagsContent.forEach(item => {
                        if (
                            item.type === "brandpinyin" ||
                            item.type === "brands"
                        ) {
                            this.brandpinyin.push(item);
                        } else if (
                            item.type !== "brandpinyin" &&
                            item.type !== "brands"
                        ) {
                            this.RemainingData.push(item);
                        }
                    });
                    this.brands = this.initBrands = data.brands;
                    this.brandImg = this.brandpinyin[1].values;
                    this.abcde = this.brandpinyin[0].values;
                    this.keyTitle = this.brandpinyin[1].key;
                    this.tagsContent.forEach(item => {
                        this.$set(item, "show", true);
                        this.$set(item, "more", false);
                        this.$set(item, "val", []);
                    });
                }
            });
        },

        // 展示更多搜索项
        moreOptions() {
            this.showTagCount = this.showTagCount === 2 ? 100 : 2;
        },

        clearSelectedItem() {
            this.multiple = false;
            this.multSelected = [];
            this.brands = this.initBrands;

            this.selectedItem.forEach(item => {
                if (this.params.hasOwnProperty(item.type)) {
                    this.params[item.type] = "";
                }
            });

            this.selectedItem = [];

            this.tagsContent.forEach(item => {
                this.$set(item, "show", true);
                this.$set(item, "more", false);
                this.$set(item, "val", []);
            });
        },
        // 品牌首字母搜索
        otherFn(e) {
            // console.log(e.target.id);
            // this.otherID = e.target.id
            let arr = [];
            this.brandpinyin[1].values.forEach(item => {
                if (item.pinyin == e.target.id) {
                    arr.push(item);
                }
            });
            this.brandImg = arr;
            console.log(this.brandImg);
            arr = [];
        },
    },
    beforeMount() {
        // 有分类id就根据id搜索
        if (this.$route.query.categoryId) {
            let cateId = this.$route.query.categoryId.split(",");
            Object.assign(this.params, this.$route.query);
            this.params.categoryId = cateId[cateId.length - 1];
        } else {
            Object.assign(this.params, this.$route.query);
        }
       
        this.getFilterList(this.params);
        this.getNav();
    },
    mounted() {},
    created() {}
};
</script>

<style scoped lang="scss">
/** 头部展示筛选项 */
.head-bar {
    width: 100%;
    background: #fff;
    margin-top: 3px;
    display: flex;
    height: 40px;
    align-items: center;

    // border-top: red 1px solid;
    > div:first-child {
        padding: 0 8px;
        font-size: 18px;
        font-weight: bold;

        &:hover {
            color: $theme_color;
            cursor: pointer;
        }
    }

    .bar {
        font-size: 12px;
        position: relative;
        background: #fff;
        border: 1px solid #999;
        padding: 0 8px;
        min-width: 85px;
        text-align: center;
        margin: 0 3px;

        &:hover {
            color: $theme_color;
            border-color: $theme_color;
            border-bottom-color: #fff;
            cursor: pointer;

            ul {
                display: block;
            }

            .ivu-icon {
                transform: rotate(180deg);
            }
        }

        ul {
            display: none;
            position: absolute;
            top: 18px;
            left: -1px;
            width: 300px;
            padding: 5px 10px;
            background: #fff;
            border: 1px solid $theme_color;
            z-index: 1;

            &::before {
                content: "";
                position: absolute;
                width: 83px;
                left: 0;
                top: -1px;
                z-index: 2;
                border-top: 1px solid #fff;
            }

            &:hover {
                display: block;
            }

            clear: left;

            li {
                color: #999;
                float: left;
                width: 30%;
                margin: 3px 0;
                text-align: left;

                &:hover {
                    color: $theme_color;
                    cursor: pointer;
                }
            }
        }
    }

    //所选分类
    .selected-item {
        font-size: 12px;
        color: #000;
        padding: 2px 22px 2px 8px;
        margin-right: 5px;
        max-width: 250px;
        height: 24px;
        overflow: hidden;
        position: relative;
        background-color: #f3f3f3;
        border: 1px solid #ddd;

        &:hover {
            border-color: $theme_color;
            background-color: #fff;

            .ivu-icon {
                color: #fff;
                background-color: $theme_color;
            }
        }

        span:nth-child(2) {
            color: $theme_color;
        }

        .ivu-icon {
            position: absolute;
            right: 0;
            top: 0;
            color: $theme_color;
            line-height: 22px;
            width: 21px;
            height: 22px;
            font-size: 14px;
        }
    }

    .clear {
        font-size: 14px;
        padding: 0 10px;
        font-weight: bold;
        color: $theme_color;
        cursor: pointer;
    }
}

.content-tow {
    position: relative;
    margin-top: 20px;

    .content-tow-title {
        border-bottom: #028fcc solid 1px;

        .text {
            height: 50px;
            text-align: center;
            line-height: 50px;
            font-size: 22px;
            font-weight: 700;
            background-color: #028fcc;
            width: 400px;
            margin: 0 auto;
            border-radius: 190px 190px 0 0;
            color: #fff;
        }
    }

    .content-img {
        width: 300px;
        height: 210px !important;
        
        position: absolute;
        right: 10px;
        // bottom: 10px;
        top: 60px;
        font-size: 30px;
        color: #fff;
        text-align: center;
        line-height: 210px;

        img {
            width: 100%;
            height: 100%;
        }
    }
}

/** 筛选主体 */
.content {
    background: #fff;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    margin: 10px 0;
}

/** 品牌 start */
.brand {
    border-bottom: 1px solid #ddd;
    display: flex;
    font-size: 12px;
    height: 220px;

    > div:first-child {
        width: 100px;
        background: #028fcc;
        padding: 10px 0 0 10px;
        border-radius: 5px 0 0 5px;
        color: #fff;
        font-size: 22px;
        writing-mode: vertical-rl;
        text-align: center;
        line-height: 100px;
        font-weight: 700;
    }

    > div:last-child {
        width: 1100px;
        padding: 10px;
        position: relative;
        display: flex;
        justify-content: start;

        ul {
            width: 1050px;
            max-height: 100px;
            overflow: hidden;
            padding-top: 1px;
            clear: left;

            li {
                width: 100px;
                height: 50px;
                float: left;
                line-height: 45px;
                border: 1px solid #ddd;
                margin: -1px -1px 0 0;
                overflow: hidden;
                position: relative;
                padding: 2px;
                margin-bottom: 4px;
                margin-right: 5px;

                img {
                    width: 100%;
                    height: 100%;
                }

                &:hover {
                    border-color: $theme_color;
                    border: 2px solid $theme_color;
                    top: 0;
                    left: 0;
                    position: relative;
                    z-index: 1;

                    img {
                        display: none;
                    }
                }

                &.act {
                    border-color: $theme_color;
                }

                span {
                    display: inline-block;
                    width: 100%;
                    height: 100%;
                    color: $theme_color;
                    text-align: center;
                    font-size: 12px;
                    cursor: pointer;
                }

                .corner-icon {
                    position: absolute;
                    right: -1px;
                    bottom: -1px;

                    div {
                        width: 0;
                        border-top: 20px solid transparent;
                        border-right: 20px solid $theme_color;
                    }

                    .ivu-icon {
                        font-size: 12px;
                        position: absolute;
                        bottom: 0;
                        right: 1px;
                        transform: rotate(-15deg);
                        color: #fff;
                    }
                }
            }

            .border-color {
                border-color: $theme_color;
                z-index: 1;
            }
        }

        .show-more {
            height: auto;
            max-height: 200px;
            overflow-y: auto;
            width: 1100px;
            display: flex;
            justify-content: start;
            flex-wrap: wrap;
        }

        .btn {
            position: absolute;
            right: 10px;
            top: 10px;

            span {
                border: 1px solid #ddd;
                margin-left: 10px;
                color: #999;
                display: inline-block;
                padding: 1px 3px;
                font-size: 12px;

                &:hover {
                    cursor: pointer;
                    color: $theme_color;
                    border-color: $theme_color;
                }
            }
        }

        .multBtn {
            text-align: center;
            margin-top: 10px;

            .ivu-btn {
                font-size: 12px !important;
            }

            .ivu-btn:last-child {
                margin-left: 10px;
            }
        }
    }
}

/** 品牌 end */
/** 其他筛选项  start */
.other {
    border-bottom: 1px solid #ddd;
    display: flex;
    min-height: 42px;
    font-size: 14px;

    &:last-child {
        border: none;
    }

    > div:first-child {
        width: 100px;
        background: #eee;
        padding-left: 10px;
        line-height: 42px;
        font-size: 16px;
        font-weight: 700;
    }

    > div:last-child {
        width: 750px;
        padding: 0 10px;
        position: relative;

        .list {
            width: 900px;
            height: 42px;
            overflow: hidden;
            clear: left;

            .item {
                width: 100px;
                height: 42px;
                float: left;
                line-height: 42px;
                color: #000;
                overflow: hidden;
                position: relative;
                font-size: 12px;
                padding: 2px;
                cursor: pointer;

                &:hover {
                    color: $theme_color;
                }

                &.act {
                    color: $theme_color;
                }
            }
        }

        .show-more {
            height: auto;
        }

        .btn {
            position: absolute;
            right: 10px;
            top: 5px;

            span {
                border: 1px solid #ddd;
                margin-left: 10px;
                color: #999;
                display: inline-block;
                padding: 1px 3px;
                font-size: 12px;

                &:hover {
                    cursor: pointer;
                    color: $theme_color;
                    border-color: $theme_color;
                }
            }
        }

        .multBtn {
            text-align: center;
            margin-top: 10px;
            margin-bottom: 10px;

            .ivu-btn {
                font-size: 12px !important;
            }

            .ivu-btn:last-child {
                margin-left: 10px;
            }
        }
    }
}

// -----------热门类目开始---------
.mold-data {
    .hot-mold {
        border-bottom: 1px solid #ddd;
        display: flex;
        min-height: 42px;
        font-size: 14px;

        &:last-child {
            border: none;
        }

        > div:first-child {
            width: 100px;
            background: #eee;
            padding-left: 10px;
            line-height: 42px;
            font-size: 14px;
            font-weight: 700;
            // font-size: 24px;
        }

        > div:last-child {
            width: 750px;
            padding: 0 10px;
            position: relative;

            .list {
                width: 1000px;
                height: 42px;
                overflow: hidden;
                clear: left;

                .item {
                    width: 100px;
                    height: 42px;
                    float: left;
                    line-height: 42px;
                    color: #000;
                    overflow: hidden;
                    position: relative;
                    font-size: 12px;
                    padding: 2px;
                    cursor: pointer;

                    &:hover {
                        color: $theme_color;
                    }

                    &.act {
                        color: $theme_color;
                    }
                }
            }

            .show-more {
                height: auto;
            }

            .btn {
                position: absolute;
                right: 10px;
                top: 5px;

                span {
                    border: 1px solid #ddd;
                    margin-left: 10px;
                    color: #999;
                    display: inline-block;
                    padding: 1px 3px;
                    font-size: 12px;

                    &:hover {
                        cursor: pointer;
                        color: $theme_color;
                        border-color: $theme_color;
                    }
                }
            }

            .multBtn {
                text-align: center;
                margin-top: 10px;
                margin-bottom: 10px;

                .ivu-btn {
                    font-size: 12px !important;
                }

                .ivu-btn:last-child {
                    margin-left: 10px;
                }
            }
        }
    }
}

// -----------热门类目结束---------
.more-options {
    // margin: 5px;
    color: #4d9cf1;
    font-size: 12px;
    cursor: pointer;
    text-align: right;
    position: absolute;
    right: 350px;
    top: 10px;
    z-index: 10;
}

.more-options:hover {
    color: #0165d1;
}

.search {
    /deep/ .ivu-input-group-append {
        border: 1px solid $theme_color;
        border-left: none;
        height: 30px;
        background-color: $theme_color;
        color: #ffffff;

        button {
            font-size: 12px;
            //font-weight: 600;
            line-height: 1;
            padding: 0 9px;
        }
    }
}

/** 其他筛选项  end */
::-webkit-scrollbar {
    width: 10px;
    /* 宽度 */
}

/* 滚动条滑块样式 */
::-webkit-scrollbar-thumb {
    background: #888;
    /* 滑块颜色 */
    border-radius: 10px;
    /* 圆角 */
}

/* 鼠标悬停在滑块上时的样式 */
::-webkit-scrollbar-thumb:hover {
    background: #555;
    /* 滑块颜色 */
}

/* 滚动条轨道样式 */
::-webkit-scrollbar-track {
    background: #f1f1f1;
    /* 轨道颜色 */
    border-radius: 10px;
    /* 圆角 */
}
</style>
